<!DOCTYPE HTML>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">




	<meta charset="UTF-8">

	<meta http-equiv="X-UA-Compatible" content="chrome=1">

	<meta name="viewport" content="width=device-width">

	
	<title>Useful :nth-child Recipes | CSS-Tricks</title>

	<link rel="shortcut icon" href="http://cdn.css-tricks.com/favicon.ico">

	<link rel="apple-touch-icon" href="http://css-tricks.com/apple-touch-icon.png">

	<link rel="search" type="application/opensearchdescription+xml" href="http://css-tricks.com/opensearch.xml" title="CSS-Tricks Search">

	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/CssTricks">

	<link rel="author" href="https://plus.google.com/101987072260327250694/posts">

	
<!-- This site is optimized with the Yoast WordPress SEO plugin v1.4.7 - http://yoast.com/wordpress/seo/ -->
<meta name="description" content="I get a little giddy when I come across perfect uses for :nth-child or :nth-of-type (read about the difference). The better you understand them, the more css nerdgasms you get to have!">
<link rel="canonical" href="http://css-tricks.com/useful-nth-child-recipies/">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Real_CSS_Tricks">
<meta name="twitter:description" content="I get a little giddy when I come across perfect uses for :nth-child or :nth-of-type (read about the difference). The better you understand them, the more css nerdgasms you get to have!">
<meta name="twitter:title" content="Useful :nth-child Recipes - CSS-Tricks">
<meta name="twitter:url" content="http://css-tricks.com/useful-nth-child-recipies/">
<!-- / Yoast WordPress SEO plugin. -->

<link rel="alternate" type="application/rss+xml" title="CSS-Tricks » Useful :nth-child Recipes Comments Feed" href="http://css-tricks.com/useful-nth-child-recipies/feed/">
<link rel="stylesheet" id="jetpack-widgets-css" href="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/widgets.css" type="text/css" media="all">
<div class="fit-vids-style">­<style>               .fluid-width-video-wrapper {                 width: 100%;                              position: relative;                       padding: 0;                            }                                                                                   .fluid-width-video-wrapper iframe,        .fluid-width-video-wrapper object,        .fluid-width-video-wrapper embed,         .fluid-width-video-wrapper video {           position: absolute;                       top: 0;                                   left: 0;                                  width: 100%;                              height: 100%;                          }                                       </style></div><script type="text/javascript" async="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/quant.js"></script><script type="text/javascript" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/jquery.js"></script>
<link rel="shortlink" href="http://css-tricks.com/?p=9657">
<!-- Better Art Direction Styles -->


<style type="text/css">img#wpstats{display:none}</style>  <script>window.jQuery || document.write('<script src="/wp-includes/js/jquery/jquery.js"><\/script>')</script>

      <link rel="stylesheet" href="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/fonts.css">
  
  <!--[if !IE]><!-->
  <link rel="stylesheet" href="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/style.css">
  <!--<![endif]-->
  <!--[if lt IE 9]>
  <link rel="stylesheet" href="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/css/oldie.css">
  <![endif]-->
  <!--[if IE 9]>
  <link rel="stylesheet" href="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/style.css?v1.2">
  <![endif]-->

  
			<script src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/comment-reply.js"></script>
    <script src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/showdown-ck.js"></script>
	
	
	
	
	
  
	
	
  
  
	
	
<script src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/bsa.js" async="" type="text/javascript"></script><script async="async" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/s_3469a2a501a9e18091036aa0c89f9dcb.js" id="_bsap_js_3469a2a501a9e18091036aa0c89f9dcb" type="text/javascript"></script><script src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/ga.js" async="" type="text/javascript"></script><style id="bsa_css" type="text/css">.one{position:relative}.one .bsa_it_ad{display:block;padding:15px;border:1px solid #e1e1e1;background:#f9f9f9;font-family:helvetica,arial,sans-serif;line-height:100%;position:relative}.one .bsa_it_ad a{text-decoration:none}.one .bsa_it_ad a:hover{text-decoration:none}.one .bsa_it_ad .bsa_it_t{display:block;font-size:12px;font-weight:bold;color:#212121;line-height:125%;padding:0 0 5px 0}.one .bsa_it_ad .bsa_it_d{display:block;font-size:11px;color:#434343;font-size:12px;line-height:135%}.one .bsa_it_ad .bsa_it_i{float:left;margin:0 15px 10px 0}.one .bsa_it_p{display:block;text-align:right;position:absolute;bottom:10px;right:15px}.one .bsa_it_p a{font-size:10px;color:#666;text-decoration:none}.one .bsa_it_ad .bsa_it_p a:hover{font-style:italic}div.bsap_1279518{width:100%;display:block}div.bsap_1279518 a{width:200px}div.bsap_1279518 a img{padding:0}div.bsap_1279518 a em{font-style:normal}div.bsap_1279518 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;float:left;}div.bsap_1279518 img{border:0;clear:right;}div.bsap_1279518 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}div.bsap_1279518 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}div.bsap_1279518 a{line-height:100%}div.bsap_1279518 a.adhere{width:200px;height:200px;line-height:1600%}html>body div.bsap_1279518 a.adhere{width:198px;height:198px}div.bsap_1279518 img.s{height:0;width:0}</style></head><body class="single single-post postid-9657 single-format-standard user-0">

    <script>
  (function(){
    var bsa = document.createElement('script');
       bsa.type = 'text/javascript';
       bsa.async = true;
       bsa.src = 'http://s3.buysellads.com/ac/bsa.js';
    (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
  })();
  </script>
  
  <header id="top" class="top">

  <div class="logo">
    <a href="http://css-tricks.com/">
      CSS<span>-Tricks</span>
    </a>
  </div>

    <a class="top-treehouse-ad" href="http://teamtreehouse.com/redirect/css-tricks">
    <div class="frog-foot-box">
    <svg class="frog-foot" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewbox="0 0 409.48 446.978" enable-background="new 0 0 409.48 446.978" xml:space="preserve"><path d="M361.51 82.324c-14.695-8.308-38.162 5.053-52.414 29.844l-25.805 44.9 c-9.43 18.662-8.137 40.9 3.8 58.034l0.752 1.082c11.959 17.2 28 33 33.3 38.7 c3.117 3.3 5.5 7.4 6.8 12.124c4.357 15.584-4.74 31.751-20.324 36.112c-15.584 4.359-31.752-4.738-36.111-20.324 c-1.096-3.912-1.34-7.859-0.848-11.648c0.838-6.439-1.229-16.927-10.461-27.223s-28.102 9.15-34.203 29.149l-0.281 0.9 c-6.102 19.998-9.953 37.45-8.801 39.13c0.686 1 1.3 2.1 1.9 3.147c8.561 16.1 2.4 36.105-13.664 44.7 c-16.108 8.562-36.105 2.444-44.668-13.662c-8.561-16.108-2.443-36.105 13.664-44.667c0.723-0.385 1.454-0.739 2.191-1.064 c1.23-0.541 4.72-8.948 7.748-18.878c3.031-9.932 5.486-17.98 5.486-17.98c0.324-1.057 0.605-2.102 0.861-3.138l16.3-58.202 l-17.435 35.785c-2.066-6.794-5.482-7.036-12.964-1.684c-4.513 3.229-11.974 9.586-15.618 12.2 c-6.844 4.897-12.569 14.408-15.6 20.235c-1.783 3.43-4.281 6.558-7.474 9.146c-12.482 10.128-30.81 8.219-40.937-4.263 c-10.127-12.48-8.218-30.808 4.262-40.935c3.658-2.969 7.821-4.903 12.131-5.841c7.333-1.593 32.271-16.827 47.296-27.578 c2.69-1.924 4.947-3.745 6.783-5.433l40.118-30.468l-34.939 18.879c0 0-3.555-0.36-7.913 0.1 c-12.788 1.419-25.957 3.221-28.445 6.388c-1.472 1.87-3.224 3.568-5.253 5.027c-11.66 8.4-27.924 5.756-36.324-5.906 c-8.402-11.663-5.755-27.928 5.905-36.326c4.812-3.464 10.404-5.049 15.901-4.896c9.353 0.3 34 5.2 54.5 1.6 l5.288-0.937c20.589-3.648 45.238-21.57 55.06-40.03c0 0 9.617-16.893 21.479-37.731c11.863-20.838 10.986-43.664-1.955-50.98 l-23.436-13.25c-11.824-6.685-31.18-6.697-43.013-0.025L22.827 97.395c-11.832 6.671-21.514 23.243-21.514 36.826v177.826 c0 13.6 9.7 30.2 21.5 36.828l161.416 90.997c11.833 6.7 31.2 6.7 43.013-0.025l160.863-90.947 c11.826-6.685 21.502-23.269 21.502-36.853V134.221c0-13.583-9.676-30.168-21.502-36.853 C388.12 97.4 376.2 90.6 361.5 82.324z" class="frog-foot-shape">
    </path>
    </svg></div>
    <div class="top-treehouse-text">
    <h5><span class="treehouse-brand">treehouse : </span> <strong>what would you like to learn today?</strong></h5>
    <div class="treehouse-topics">
      <span>Web Design</span>
      <span>Web Development</span>
      <span>iOS Development</span>
    </div>
    </div>
  </a>
  
  <section class="search" role="search">

    <div class="open-search">
      <a href="#" title="Show search box" role="button">
         <span data-icon="m" aria-hidden="true"></span>
         <span class="screen-reader">Show search box</span>
      </a>
    </div>

    <div class="close-search">
      <form id="search-form" action="/search-results/">

        <div>
          <label for="q" id="search-label" class="screen-reader">Search</label>
          <input aria-labelledby="search-label" id="q" name="q" class="search-field placeholder" placeholder="Search terms..." value="Search terms..." type="search">
          <input value="Search" class="button search-button" type="submit">
        </div>

        <div class="search-parts">
          <strong>Search in:</strong>
          <a data-url="/search-results/" class="active">All</a>
          <a data-url="/search-results/articles/">Articles</a>
          <a data-url="/search-results/forums/">Forums</a>
          <a data-url="/search-results/snippets/">Snippets</a>
          <a data-url="/search-results/video/">Videos</a>

          <a href="#" id="x-search" class="x-search">✕</a>
        </div>

      </form>
    </div>

  </section>

</header>
  <div class="page-wrap">

    <nav class="main-nav" id="main-nav">
  <a href="http://css-tricks.com/" class="home">
    <span data-icon="" aria-hidden="true"></span>Home
  </a>
  <a href="http://css-tricks.com/forums/" class="forums">
    <span data-icon="9" aria-hidden="true"></span>Forums
  </a>
  <a href="http://css-tricks.com/snippets/" class="snippets">
    <span data-icon="Q" aria-hidden="true"></span>Snippets
  </a>
  <a href="http://css-tricks.com/gallery/" class="gallery">
    <span data-icon="p" aria-hidden="true"></span>Gallery
  </a>
  <a href="http://css-tricks.com/video-screencasts/" class="videos">
    <span data-icon="q" aria-hidden="true"></span>Videos
  </a>
  <a href="http://css-tricks.com/almanac/" class="almanac">
    <span data-icon="ó" aria-hidden="true"></span>Almanac
  </a>
  <a href="http://css-tricks.com/downloads/" class="demos">
    <span data-icon="w" aria-hidden="true"></span>Demos
  </a>
  <a href="http://css-tricks.com/lodge/" class="lodge">
    <span data-icon="6" aria-hidden="true"></span>Lodge
  </a>


  <a href="#main-nav" class="show-hide-navigation" id="show-hide-navigation">
    Navigation 'n' Search
  </a>
</nav>
<div class="grid group">

	<section class="blog-posts grid-2-3">

		<article class="module" id="post-9657">

			<h1>Useful :nth-child Recipes</h1>

			<p class="time">

				Published
				<time datetime="2011-06-16">
					June 16, 2011				</time>

				by Chris Coyier			</p>

			<div class="google-ad">
        				<div id="bsap_1279518" class="bsap_1279518 bsap"><a href="http://stats.buysellads.com/click.go?z=1279518&amp;b=3305598&amp;g=&amp;s=&amp;sw=1920&amp;sh=1080&amp;br=firefox,3.6,win&amp;r=0.5475436918169164&amp;link=http://www.freshbooks.com/painless-billing/?ref=9282" onmouseover="window.status = 'http://www.freshbooks.com/painless-billing/?ref=9282'; return true;" onmouseout="window.status=''; return true;" class="ad1 odd" title="FreshBooks Cloud Accounting - Sign Up Today For Your Free Trial!" id="bsa_3305598" target="_blank"><img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/163270-1363800073.png" alt="FreshBooks Cloud Accounting - Sign Up Today For Your Free Trial!" width="200" height="200"></a></div>
              </div>

			<p>I get a little giddy when I come across perfect uses for <code>:nth-child</code> or <code>:nth-of-type</code> (<a href="http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/">read about the difference</a>). The better you understand them, the more css nerdgasms you get to have!</p>
<p>In these simple "recipes" (really: expressions) I'll arbitrarily use a
 flat list of list items and randomly chosen numbers. But it should be 
fairly obvious how to alter them to get similar selections. </p>
<h3>Select Only the Fifth Element</h3>
<p><img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/5.png" alt="" title="5" class="alignnone size-full wp-image-9760" width="570" height="93"></p>
<pre rel="CSS"><code class="language-css">li:nth-child(5) {
    color: green;   
}</code></pre>
<p>To select the first element, you can use :first-child, or I bet you can guess how to alter the above to do it as well. </p>
<h3>Select All But The First Five</h3>
<p><img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/6-10.png" alt="" title="6-10" class="alignnone size-full wp-image-9761" width="570" height="93"></p>
<pre rel="CSS"><code class="language-css">li:nth-child(n+6) {
    color: green;   
}</code></pre>
<p>If there were more than 10 elements here, it would select all of them beyond 5.</p>
<h3>Select Only The First Five</h3>
<p><img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/1-5.png" alt="" title="1-5" class="alignnone size-full wp-image-9762" width="570" height="93"></p>
<pre rel="CSS"><code class="language-css">li:nth-child(-n+5) {
    color: green;   
}</code></pre>
<h3>Select Every Fourth, Starting At The First</h3>
<p><img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/159.png" alt="" title="159" class="alignnone size-full wp-image-9763" width="570" height="93"></p>
<pre rel="CSS"><code class="language-css">li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}</code></pre>
<h3>Select Only Odd or Even</h3>
<p><img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/odd.png" alt="" title="odd" class="alignnone size-full wp-image-9764" width="570" height="93"></p>
<pre rel="CSS"><code class="language-css">li:nth-child(odd) {
    color: green;   
}</code></pre>
<p><img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/even.png" alt="" title="even" class="alignnone size-full wp-image-9765" width="570" height="93"></p>
<pre rel="CSS"><code class="language-css">li:nth-child(even) {
    color: green;   
}</code></pre>
<h3>Select The Last Element</h3>
<p><img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/last.png" alt="" title="last" class="alignnone size-full wp-image-9766" width="570" height="93"></p>
<pre rel="CSS"><code class="language-css">li:last-child {
    color: green;
}</code></pre>
<p>Selects the 10th because we have 10 elements here, but if there was 8
 it would select the 8th, or if there were 1,290 it would select the 
1,290th.</p>
<h3>Select the Second to Last Element</h3>
<p><img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/9.png" alt="" title="9" class="alignnone size-full wp-image-9767" width="570" height="93"></p>
<pre rel="CSS"><code class="language-css">li:nth-last-child(2) {
    color: green;
}</code></pre>
<p>Selects the 9th because we have 10 elements here, but if there were 30 elements it would select the 29th.</p>
<h3>Wanna play?</h3>
<p><a href="http://css-tricks.com/examples/nth-child-tester/">Try the tester.</a></p>
<h3>Browser Support</h3>
<p>Interestingly enough, :first-child was supported by IE 7, but it's 
not until IE 9 where the rest of this stuff is supported. Other than IE 
there isn't much browser support concern, and if you are worried about 
IE, then use <a href="http://selectivizr.com/">Selectivizr</a>. If browser support stuff is interesting or important for you, definitely check out <a href="http://caniuse.com/">When can I use...</a> which tracks this stuff very well.</p>

			
		</article>

		<div class="yarpp-related">
<section class="related-posts group">


  
    <div class="module module-related">

      <h2 class="h4">
        <a href="http://css-tricks.com/how-nth-child-works/">
          How nth-child&nbsp;Works        </a>
      </h2>

      <p>There is a CSS selector, really a pseudo-selector, called nth-child. Here is an example of using it:</p>
<p rel="CSS"><code class="language-css">ul li:nth-child(3n+3) {<br>
  …</code></p>

      <a href="http://css-tricks.com/how-nth-child-works/">Read Article →</a>

    </div>

  
    <div class="module module-related">

      <h2 class="h4">
        <a href="http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/">
          The Difference Between :nth-child and :nth-of-type        </a>
      </h2>

      <p>These are different pseudo class selectors that do slightly 
different things. In my opinion, :nth-child is more common but 
:nth-of-type is more useful.</p>

      <a href="http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/">Read Article →</a>

    </div>

  

</section>
<img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/e42758635938f2ca7d47dfaa85074d5f.gif">
</div>

    		<div id="bsap_1250418" class="bsap_1250418 bsap"><div class="bsa_it one"><div class="bsa_it_ad ad1 odd" id="bsa_1945764"><a href="http://stats.buysellads.com/click.go?z=1250418&amp;b=1945764&amp;g=&amp;s=&amp;sw=1920&amp;sh=1080&amp;br=firefox,3.6,win&amp;r=0.9992150956029837&amp;link=http://www.psd2html.com/?utm_source=css-tricks.com&amp;utm_medium=banner&amp;utm_campaign=new-p2h" onmouseover="window.status = 'http://www.psd2html.com/?utm_source=css-tricks.com&amp;utm_medium=banner&amp;utm_campaign=new-p2h'; return true;" onmouseout="window.status=''; return true;" target="_blank"><span class="bsa_it_i"><img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/168075-1366362405.png" alt="PSD to HTML conversion" width="120" height="90"></span></a><a href="http://stats.buysellads.com/click.go?z=1250418&amp;b=1945764&amp;g=&amp;s=&amp;sw=1920&amp;sh=1080&amp;br=firefox,3.6,win&amp;r=0.7522725533920156&amp;link=http://www.psd2html.com/?utm_source=css-tricks.com&amp;utm_medium=banner&amp;utm_campaign=new-p2h" onmouseover="window.status = 'http://www.psd2html.com/?utm_source=css-tricks.com&amp;utm_medium=banner&amp;utm_campaign=new-p2h'; return true;" onmouseout="window.status=''; return true;" target="_blank"><span class="bsa_it_t">PSD to HTML conversion</span><span class="bsa_it_d">PSD2HTML.com with over 370 professionals takes the designs to HTML and beyond</span></a><div style="clear: both;"></div></div><div class="bsa_it_ad ad2 even" id="bsa_3305506"><a href="http://stats.buysellads.com/click.go?z=1250418&amp;b=3305506&amp;g=&amp;s=&amp;sw=1920&amp;sh=1080&amp;br=firefox,3.6,win&amp;r=0.9499478491104303&amp;link=http://www.freshbooks.com/painless-billing/?ref=9266" onmouseover="window.status = 'http://www.freshbooks.com/painless-billing/?ref=9266'; return true;" onmouseout="window.status=''; return true;" target="_blank"><span class="bsa_it_i"><img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/163250-1363798233.png" alt="Try Cloud Accounting Free" width="120" height="90"></span></a><a href="http://stats.buysellads.com/click.go?z=1250418&amp;b=3305506&amp;g=&amp;s=&amp;sw=1920&amp;sh=1080&amp;br=firefox,3.6,win&amp;r=0.1817832412272361&amp;link=http://www.freshbooks.com/painless-billing/?ref=9266" onmouseover="window.status = 'http://www.freshbooks.com/painless-billing/?ref=9266'; return true;" onmouseout="window.status=''; return true;" target="_blank"><span class="bsa_it_t">Try Cloud Accounting Free</span><span class="bsa_it_d">Sign up for your FREE trial with FreshBooks &amp; join 5 million who bill painlessly</span></a><div style="clear: both;"></div></div><span class="bsa_it_p"><a href="http://buysellads.com/buy/detail/1098/zone/1250418?utm_source=site_1098&amp;utm_medium=website&amp;utm_campaign=imagetext&amp;utm_content=zone_1250418">ads by BSA</a></span></div></div>
    
					<a href="#" class="button full-width-button view-comments-button" id="view-comments-button">View Comments</a>

<section id="comments">



	<h1 class="h2 comments-title">
		<span aria-hidden="true" data-icon="9"></span>Comments
	</h1>

	<ol class="commentlist group">
		
		<li class="comment even thread-even depth-1 buried" id="li-comment-96993">

      <div class="grid group nopadding comment-wrap" id="comment-96993">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/ea4d7f20ca2b59f1f21e482322cf85ff.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.aleare.com.ar/" rel="external nofollow" class="url">Aleare</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-96993"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T04:33:24+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Simply fully useful !! Thanks</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-96995">

      <div class="grid group nopadding comment-wrap" id="comment-96995">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/645e038da8af810c53bf187f8a47ea8a.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://makesence.me/" rel="external nofollow" class="url">ALex</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-96995"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T04:47:02+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Nice list, but am colorblind or are you mixing up green 
and red? Still, a nice list. Too bad IE doesn’t support this until IE9 
(as you mentioned <a href="http://css-tricks.com/how-nth-child-works/" rel="nofollow">here</a>)</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	<ul class="children">

		<li class="comment even depth-2" id="li-comment-96998">

      <div class="grid group nopadding comment-wrap" id="comment-96998">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/ed1776fb4ab3c990b3ee47c2a58029c6.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">Robbert</div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-96998"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T04:59:27+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Actually Chris did you color with means the text is supposed to be green, and in the examples there is no text ^^.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt depth-2" id="li-comment-96999">

      <div class="grid group nopadding comment-wrap" id="comment-96999">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/ed1776fb4ab3c990b3ee47c2a58029c6.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">Robbert</div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-96999"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T04:59:51+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>I mean red :P</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even depth-2" id="li-comment-97004">

      <div class="grid group nopadding comment-wrap" id="comment-97004">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/ef2f342ca8b441984154f1d970be0636.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.socialnetworkmd.com/" rel="external nofollow" class="url">Jack</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97004"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T05:26:34+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>I caught that too, definitely there just to illustrate 
the situation but it was goofy to see a green ball and immediately read 
color: red!</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment byuser comment-author-chriscoyier-2 bypostauthor odd alt depth-2" id="li-comment-97007">

      <div class="grid group nopadding comment-wrap" id="comment-97007">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/8081b26e05bb4354f7d65ffc34cbbd67.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://chriscoyier.net/" rel="external nofollow" class="url">Chris Coyier</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97007"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T05:31:37+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Ohhhh I get it. At first I was like what they heck are 
these guys talking about. I changed the word “red” to “green” just so it
 seems less weird. They are both just hypothetical.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>
</ul>
</li>

		<li class="comment even thread-even depth-1" id="li-comment-96996">

      <div class="grid group nopadding comment-wrap" id="comment-96996">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/df2070ca58c840d32f19c16414c12ebc.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://johmanx.com/" rel="external nofollow" class="url">Jan-Marten</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-96996"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T04:48:41+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Great article, Chris! I actually didn’t know nth-child 
accepted these values as parameters. I really need to fiddle around more
 with CSS3, since I don’t want to rely on it yet in production.</p>
<p>A lot of kindergarten scenarios come to mind when looking at the odd 
numbered string of balls. Btw. Was it you who did that background 
trickery with textures and prime numbers? Maybe something for nth-child 
to solve?</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	<ul class="children">

		<li class="comment odd alt depth-2" id="li-comment-97011">

      <div class="grid group nopadding comment-wrap" id="comment-97011">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/ed77c74c903a3dbcbbc9ce09e6f10866.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://samanthaarmacost.com/" rel="external nofollow" class="url">Sam</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97011"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T06:19:46+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>For context, the prime number background article – <a href="http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/" rel="nofollow">http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/</a></p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>
</ul>
</li>

		<li class="comment even thread-odd thread-alt depth-1" id="li-comment-97015">

      <div class="grid group nopadding comment-wrap" id="comment-97015">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/6f125f519f20c924a2995e7d2040b92b.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">Chris</div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97015"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T07:27:30+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Thanks for another great explanation Chris, if I’m not 
mistaken and correct me if I’m wrong but doesn’t jQuery already have 
most support for CSS3 pseudo selectors already built into Sizzle??</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	<ul class="children">

		<li class="comment byuser comment-author-chriscoyier-2 bypostauthor odd alt depth-2" id="li-comment-97016">

      <div class="grid group nopadding comment-wrap" id="comment-97016">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/8081b26e05bb4354f7d65ffc34cbbd67.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://chriscoyier.net/" rel="external nofollow" class="url">Chris Coyier</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97016"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T07:35:36+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>It has :nth-child but not :nth-of-type. You can add all of them to jQuery with this: <a href="http://github.com/keithclark/JQuery-Extended-Selectors/blob/master/jquery-extra-selectors.js" rel="nofollow">http://github.com/keithclark/JQuery-Extended-Selectors/blob/master/jquery-extra-selectors.js</a></p>
<p>If you are referring to the Selectivizr link at the bottom though, 
that’s different. That’s a library that just makes the actual CSS that 
you write work.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even depth-2" id="li-comment-97041">

      <div class="grid group nopadding comment-wrap" id="comment-97041">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/8e75de08afdc1e0fe9333e758d3c7249.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://standardista.com/" rel="external nofollow" class="url">Estelle</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97041"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T14:10:26+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>There are jQuery plugins to make browsers support selectors it doesn’t natively support like <a href="http://www.selectivizr.com/" rel="nofollow">http://www.selectivizr.com</a>. jQuery has slightly different syntax for $(some_selectors). </p>
<p>Check out <a href="http://standardista.com/jquery/#slcjQuery" rel="nofollow">http://standardista.com/jquery/#slcjQuery</a> (and lower on that page) for some jQuery only selectors.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt depth-2" id="li-comment-97056">

      <div class="grid group nopadding comment-wrap" id="comment-97056">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/9e3e92366d82f660c1fccdce25534cc4.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">Chris</div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97056"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T19:23:14+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Ahh that makes more sense now</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>
</ul>
</li>

		<li class="comment even thread-even depth-1" id="li-comment-97017">

      <div class="grid group nopadding comment-wrap" id="comment-97017">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/9215f8e1629bf8ad9932239cadd21a92.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://infrequently.org/" rel="external nofollow" class="url">Alex Russell</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97017"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T08:01:54+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Perhaps a gratuitous solution for IE, but you can also 
use Chrome Frame to enable this (and CSS gradients, and animations, and 
all the rest) there.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-97019">

      <div class="grid group nopadding comment-wrap" id="comment-97019">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/15b0525dc342aae23a9d73d608344f6a.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.winepressofwords.com/" rel="external nofollow" class="url">Thomas McGee</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97019"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T08:05:23+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Thanks for this resource! I’ve been looking for a guide 
that laid out clearly the different options for :nth-child selectors and
 this is the best I’ve seen. :nth-child  are a vital piece of good CSS 
and I’ll definitely be taking advantage of it. Thanks again!</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-even depth-1" id="li-comment-97028">

      <div class="grid group nopadding comment-wrap" id="comment-97028">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/d90572e3ae57526578c1d2b9b8d9a8bc.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://codelabgh.com/" rel="external nofollow" class="url">Joe Twumasi</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97028"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T11:21:58+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Chris is there any fix for lower IE versions ? </p>
<p>Thanks</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	<ul class="children">

		<li class="comment byuser comment-author-chriscoyier-2 bypostauthor odd alt depth-2" id="li-comment-97042">

      <div class="grid group nopadding comment-wrap" id="comment-97042">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/8081b26e05bb4354f7d65ffc34cbbd67.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://chriscoyier.net/" rel="external nofollow" class="url">Chris Coyier</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97042"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T15:09:23+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Yeah man check out the last paragraph of the article.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even depth-2" id="li-comment-97065">

      <div class="grid group nopadding comment-wrap" id="comment-97065">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/e6c31d18052706ff3f5fe7e496031e47.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.daqianduan.com/" rel="external nofollow" class="url">Hao Chan</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97065"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T21:16:31+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>ok!!!<br>
The last  “Browser Support”</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>
</ul>
</li>

		<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-97046">

      <div class="grid group nopadding comment-wrap" id="comment-97046">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/794f146f1e739414fed2468d562e4ff8.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.mojowebdesign.com.au/" rel="external nofollow" class="url">Richard</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97046"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T16:12:04+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>i’m still fresh to this method but still giving it a fair suck of the sav and i think i’ve only scratched the surface.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-even depth-1" id="li-comment-97066">

      <div class="grid group nopadding comment-wrap" id="comment-97066">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/e6c31d18052706ff3f5fe7e496031e47.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.daqianduan.com/" rel="external nofollow" class="url">Hao Chan</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97066"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-16T21:18:29+00:00">June 16, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Good job!!<br>
I can be translated into Chinese release?</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-97077">

      <div class="grid group nopadding comment-wrap" id="comment-97077">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/f804df10ff12260a5ce133c8ea7f537b.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://youed.me/" rel="external nofollow" class="url">Ethan</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97077"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-17T01:32:22+00:00">June 17, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Great! It’s very useful for me.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-even depth-1" id="li-comment-97078">

      <div class="grid group nopadding comment-wrap" id="comment-97078">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/64777202bb6d589a6189647c38bfc739.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://eckstein.id.au/" rel="external nofollow" class="url">Gary</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97078"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-17T01:40:44+00:00">June 17, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Thank you so much – I’ve been looking for how to use nth-child!</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-97086">

      <div class="grid group nopadding comment-wrap" id="comment-97086">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/913884ce5021f4bd52ef74e2cd0975b2.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.lucasdelrio.com/" rel="external nofollow" class="url">Lucas del Rio</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97086"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-17T04:09:47+00:00">June 17, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Chris this article was great, so easy to understand and so usefull.<br>
By the way, I know you’ve been watching your stats to know which 
resolution your visitors use. In this right moment I’m using a 
Blackberry 9800 and I can’t believe how well your web fits to the screen
 and how well it works, great work!! I didn’t need to use horizontal 
scrollbar all along the article as happens with most of this blogs, so 
thank you for that :)</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	<ul class="children">

		<li class="comment even depth-2" id="li-comment-97097">

      <div class="grid group nopadding comment-wrap" id="comment-97097">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/e41b59b12b7e51118ef8864b771f17ae.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">Rob</div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97097"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-17T08:26:34+00:00">June 17, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>I believe that is due to the media queries in their CSS. 
 The page collapses depending on the size of the window/viewport.  Load 
the main page in a desktop web browser  and reduce the horizontal size 
of the window, the page readjusts to fit a large number of widths.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>
</ul>
</li>

		<li class="comment odd alt thread-even depth-1" id="li-comment-97088">

      <div class="grid group nopadding comment-wrap" id="comment-97088">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/d95536527e2a11f685098ee8b61e76df.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.webdesignersforum.nl/" rel="external nofollow" class="url">Robert</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97088"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-17T04:51:52+00:00">June 17, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Great article Chris, there is some stuff I didn’t know yet!</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-odd thread-alt depth-1" id="li-comment-97092">

      <div class="grid group nopadding comment-wrap" id="comment-97092">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/c5e13dd8e1a318747e9700eb5ecd0a8b.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://software-lupe.de/" rel="external nofollow" class="url">Lintzy</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97092"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-17T06:25:05+00:00">June 17, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Hi Chris,</p>
<p>just want to say “thank you”. Your articles are real lifesaver. And 
it is so fantastic and awesome, to find all necessary css-tricks on one 
website.</p>
<p>THANK YOU!</p>
<p>Angelika (aka Lintzy)</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-even depth-1" id="li-comment-97093">

      <div class="grid group nopadding comment-wrap" id="comment-97093">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/e1f5f6dc6e509c4abf6b9b5bb637a29a.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://css-plus.com/" rel="external nofollow" class="url">Jamy</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97093"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-17T06:43:20+00:00">June 17, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>IE 7 only partially supports <code>:first-child</code>. If an HTML comment precedes the first element, the <code>:first-child</code> selector won’t take effect.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-odd thread-alt depth-1" id="li-comment-97099">

      <div class="grid group nopadding comment-wrap" id="comment-97099">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/d890de547a1de5b588e1b469040682e8.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">Some guy</div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97099"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-17T08:36:51+00:00">June 17, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Even though old browsers doesn’t support these properties, you can still use jQuery.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-even depth-1" id="li-comment-97107">

      <div class="grid group nopadding comment-wrap" id="comment-97107">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/9a8c63f14f96052f64523b70c6677216.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.techtricky.com/" rel="external nofollow" class="url">Sridhar</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97107"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-17T10:39:36+00:00">June 17, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Nice feature list. IE always disappoints as usual</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-odd thread-alt depth-1" id="li-comment-97205">

      <div class="grid group nopadding comment-wrap" id="comment-97205">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/3e5826e924d052ec4e54a6724b623451.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">Ohne Mitleid</div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97205"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-18T12:08:06+00:00">June 18, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Thank you Chris! I share your enthusiasm for new :nth-child usage!</p>
<p>I don’t really have a site to show you, only some CSS styles I have 
worked out. Two new uses for me. I needed CSS to exhibit different 
behaviors on hover to display text to the left and then at the halfway 
point, to the right. Rather than going into a lengthy explanation of 
what I actually did, you can look at the code and how I applied it <a href="http://userstyles.org/styles/48331/ff4-bookmark-quicktip?r=1306299620" rel="nofollow">here</a>. </p>
<p>The second example uses odd/even for something aside from coloring 
alternating columns/rows in a table layout. I took a column of 
screenshots, positioned them left and right (odd/even) then used 
odd/even hover to zoom the image based on the odd/even so the zoom would
 display correctly. That one is <a href="http://userstyles.org/styles/48329/abandonia-quiz-zoom-english-version" rel="nofollow">here </a>.</p>
<p>If no one else can see how Chris’ explanation of how all of the 
various nth-child examples can be usefully tied together, think about 
this: a volume control or other slider. First child, speaker 
highlighted, volume max. Second to the last child, nth-last-child(2), 
highlighted again, minimum volume. Last-child, speaker mute (usually 
displayed as the red cross out). I can’t wait to code it!</p>
<p>Please show mercy if I’m not quite up to speed on this. I realize it 
might not cover every browser available. I’ve only been at it for about 
1-1/2 months.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-even depth-1" id="li-comment-97346">

      <div class="grid group nopadding comment-wrap" id="comment-97346">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/02e404d7e581f79707b1e513e5d18b98.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.authenticstyle.co.uk/" rel="external nofollow" class="url">Will</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97346"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-20T03:44:57+00:00">June 20, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Nice article. </p>
<p>I too love using :nth-child now when I’m coding up sites. Less code 
bloat and its surprising how many situations it comes in handy for.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-odd thread-alt depth-1" id="li-comment-97347">

      <div class="grid group nopadding comment-wrap" id="comment-97347">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/fa2e035b822ed247a3d876d238791fb5.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">Niall</div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97347"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-20T04:15:36+00:00">June 20, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Hey Chris<br>
Thanks for the heads up on Selectivizr, I’ve just used the wordpress plug-in version for my :nth-child navbar – works a treat</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-even depth-1" id="li-comment-97711">

      <div class="grid group nopadding comment-wrap" id="comment-97711">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/10d4a79e9990e72a1767df12b23829eb.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">Mark Wassmer</div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-97711"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-23T15:18:28+00:00">June 23, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Selectivizr (<a href="http://selectivizr.com/" rel="nofollow">http://selectivizr.com/</a>)
 is a great utility that emulates CSS3 pseudo-classes and attribute 
selectors in Internet Explorer 6-8, very much worth having a look at, 
Nice JS for PE</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-odd thread-alt depth-1 featured" id="li-comment-98171">

      <div class="grid group nopadding comment-wrap" id="comment-98171">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/747020301e8225e225e426bb120a1d05.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://mikevoermans.com/" rel="external nofollow" class="url">Mike Voermans</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-98171"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-06-28T13:55:06+00:00">June 28, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Just to expand on this a bit – I think it would be nice 
to add another demo to show how to go backwards from the end of a list. 
You have :nth-last-child(2) – but to select the last 3 elements (no 
matter the size of the list) you would need: :nth-last-child(-n+3). 
Thanks for another great demo.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-even depth-1" id="li-comment-98658">

      <div class="grid group nopadding comment-wrap" id="comment-98658">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/d235d496ed9cc61990f308129c6c17f7.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">Adnan</div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-98658"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-07-02T23:37:23+00:00">July 2, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Very Nice…</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-odd thread-alt depth-1" id="li-comment-98763">

      <div class="grid group nopadding comment-wrap" id="comment-98763">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/40abfe6fe69b9b8c481959af79935a41.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://about.me/michellejflynn" rel="external nofollow" class="url">Michelle J Flynn</a></div> <div class="comment-time"><a href="http://css-tricks.com/useful-nth-child-recipies/#comment-98763"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2011-07-04T04:42:02+00:00">July 4, 2011</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Best article I’ve seen on this! Thanks Chris.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>
	</ol>



<div class="module explanation">
	This comment thread is closed. If you have important information to share, you can always <a href="http://css-tricks.com/contact/">contact me</a>.
</div>


</section>		
	</section>

	<aside class="grid-1-3">

    <div class="module module-image-ad module-treehouse">

    <a href="http://teamtreehouse.com/redirect/css-tricks/sidebar">
    <img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/Treehouse_600x500_02.jpg">
    </a>

    <p class="note">I recommend using <a href="http://teamtreehouse.com/redirect/css-tricks/sidebar">Treehouse</a>
 for learning web design, web development, and iOS development. Their 
structured course-based learning is like a more modern college at about 
1% of the price.</p>

  </div>
  
  <div class="module group module-lodge">
    
  
    <p class="intro-lodge"><a href="http://css-tricks.com/lodge/">The Lodge</a> is a <a href="http://css-tricks.com/wp-login.php">member login</a> only area with access to video training on how to build websites from scratch using the best modern tools.</p>

    <div class="lodge-actions">
      <a href="http://css-tricks.com/lodge/signup/" class="button">Sign up!</a>
    </div>

  
  </div>

    <div class="module module-image-ad">
    <a href="http://ad.doubleclick.net/clk;270735259;96794756;g?http://www.wufoo.com/?utm_source=csstricks&amp;utm_medium=ppc&amp;cmpid=brand&amp;utm_network=d&amp;utm_term=csstricks600x600banner">
      <img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/wufoo-600x600-red.png" alt="">
    </a>
    <p class="note"><a href="http://ad.doubleclick.net/clk;270735316;96794756;a?http://www.wufoo.com/?utm_source=csstricks&amp;utm_medium=ppc&amp;cmpid=brand&amp;utm_network=d&amp;utm_term=csstrickstextlinkwufoo">Wufoo</a>
 is the best online form builder. Build any type of form from the humble
 contact form to a very complex multi-page logic-ridden payment-taking 
form in minutes. Design them to match your site then embed them there. 
Never worry about spam. <a href="http://ad.doubleclick.net/clk;270735352;96794756;a?http://wufoo.com/form-builder/?utm_source=csstricks&amp;utm_medium=ppc&amp;cmpid=brand&amp;utm_network=d&amp;utm_term=csstrickstextlinktryitfree">Try it free!</a><img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/B7043538.gif"></p>
  </div>
  
  <div class="module module-poll">
    <div id="polls-42" class="wp-polls">
	<form id="polls_form_42" class="wp-polls-form" action="/useful-nth-child-recipies/" method="post">
		<p style="display: none;"><input id="poll_42_nonce" name="wp-polls-nonce" value="c7aa2e921a" type="hidden"></p>
		<p style="display: none;"><input name="poll_id" value="42" type="hidden"></p>
		<h4>What is your opinion as to the web designers role in mobile design? <a href="http://css-tricks.com/repoll-whos-responsibility-is-mobile-design/">#</a></h4>

<div id="polls-42-ans" class="wp-polls-ans">

<ul class="wp-polls-ul group">
		<li class="group"><input id="poll-answer-247" name="poll_42" value="247" type="radio"> <label for="poll-answer-247">It is <strong>my job</strong> to make sure the website looks and functions well on mobile devices.</label></li>
		<li class="group"><input id="poll-answer-248" name="poll_42" value="248" type="radio"> <label for="poll-answer-248">It is <strong>the mobile device's job</strong> to make sure my website looks and functions well.</label></li>
		</ul>

<p class="voting-buttons">

<input name="vote" value="   Vote   " class="button" onclick="poll_vote(42);" onkeypress="poll_result(42);" type="button"> &nbsp; <a href="#ViewPollResults" class="button" onclick="poll_result(42); return false;" onkeypress="poll_result(42); return false;" title="View Results Of This Poll">View Results</a>

</p>

</div>
	</form>
</div>
  </div>
  <div class="module module-subscribe">
    <h4>Over 100,000 of the best looking web workers subscribe to CSS-Tricks. Join them?</h4>
    <div class="module-subscribe-buttons">
      <a class="button" href="http://feeds.feedburner.com/CssTricks">
        <span aria-hidden="true" data-icon="S"></span>RSS
      </a>
      <br>
      <a class="button" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=273881728">
        <span aria-hidden="true" data-icon="a"></span>iTunes
      </a>
    </div>
    <a href="http://css-tricks.com/subscription-options/">See all Subscription Options</a>
  </div>

</aside>
</div>
  </div>
  <footer class="site-footer top-footer group">

    <ul class="link-list left-links">
      <li><a href="http://css-tricks.com/contact/">Contact CSS-Tricks<span></span></a></li>
      <li class="space"><a href="http://css-tricks.com/advertising/">Advertise on CSS-Tricks<span></span></a></li>

      <li><a href="http://twitter.com/real_css_tricks">Twitter: real_css_tricks<span></span></a></li>
      <li><a href="http://facebook.com/CSSTricks">Facebook: CSSTricks<span></span></a></li>
      <li><a href="http://www.youtube.com/realcsstricks">YouTube: realcsstricks<span></span></a></li>
      <li class="space"><a href="https://github.com/CSS-Tricks/">GitHub: CSS-Tricks Org<span></span></a></li>

      <li><a href="http://twitter.com/chriscoyier">Twitter: chriscoyier<span></span></a></li>
      <li><a href="http://codepen.io/chriscoyier">CodePen: chriscoyier<span></span></a></li>
      <li><a href="http://dribbble.com/chriscoyier">Dribbble: chriscoyier<span></span></a></li>
      <li><a href="http://pinboard.in/u:chriscoyier">Pinboard: chriscoyier<span></span></a></li>
      <li><a href="http://plus.google.com/101987072260327250694/posts">Google+: chriscoyier<span></span></a></li>
    </ul>

    <ul class="link-list right-links">
      <li><a href="http://css-tricks.com/bookshelf/">The Bookshelf<span></span></a></li>
      <li><a href="http://css-tricks.com/polls/">Poll Archive<span></span></a></li>
      <li><a href="http://css-tricks.com/design-history/">Design Archive<span></span></a></li>
      <li class="space"><a href="http://css-tricks.com/archives/">Article Archive<span></span></a></li>

      <li><a href="http://digwp.com/">Digging into WordPress<span></span></a></li>
      <li><a href="http://www.lynda.com/home/DisplayCourse.aspx?lpk2=67160&amp;utm_medium=affiliate&amp;utm_source=ldc_affiliate&amp;utm_content=524&amp;utm_campaign=CD2269&amp;bid=524&amp;aid=CD2269&amp;opt=">Lynda.com WP Theme Course<span></span></a></li>

      <li><a href="http://quotesondesign.com/">Quotes on Design<span></span></a></li>
      <li class="space"><a href="http://html-ipsum.com/">HTML-Ipsum<span></span></a></li>

      <li><a href="http://css-tricks.com/deals/">Deals<span></span></a></li>
      <li><a class="footer-store-link" href="http://css-tricks.com/store/">The Store<span></span></a></li>
      <li><a href="http://css-tricks.com/license/">The License<span></span></a></li>
    </ul>

  </footer>

  <footer class="site-footer bottom-footer group">

    <div class="bottom-footer-part footer-codepen">
      <a href="http://codepen.io/" class="footer-logo">
        <img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/footer-logo-codepen.png" alt="CodePen Logo">
      </a>
      <p>
        <a href="http://codepen.io/">
          CodePen
        </a>
        is a social code playground for web designers and developers. Build demos, find inspiration, or troubleshoot code. With <a href="http://blog.codepen.io/documentation/pro-features/">CodePen PRO</a> you can teach students, pair program, host files, and more!
      </p>
    </div>

    <div class="bottom-footer-part footer-shoptalk">
      <a href="http://shoptalkshow.com/" class="footer-logo">
        <img src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/footer-logo-shoptalk.png" alt="ShopTalk Logo">
      </a>
      <p>
        <a href="http://shoptalkshow.com/">
          ShopTalk
        </a>
         is a podcast about all things web design and development hosted
 by Dave Rupert and me. The show is recorded live and covers the week in
 #hotdrama and listener Q&amp;A.
       </p>
    </div>

  </footer>

  <footer class="site-footer slogan">
    CSS-Tricks* is created, written by, and maintained by <a href="http://chriscoyier.net/">Chris Coyier</a>. It is built on <a href="http://wordpress.org/">WordPress</a>, hosted by <a href="http://www.mediatemple.net/#a_aid=4e25c84480ed2">Media Temple</a> and <a href="http://www.netdna.com/">NetDNA</a>, with fonts by <a href="http://www.typography.com/">H&amp;FJ</a>. *May or may not contain any "CSS" or "Tricks".
  </footer>

		<div style="display: none;">
	<div class="grofile-hash-map-ea4d7f20ca2b59f1f21e482322cf85ff">
	</div>
	<div class="grofile-hash-map-645e038da8af810c53bf187f8a47ea8a">
	</div>
	<div class="grofile-hash-map-ed1776fb4ab3c990b3ee47c2a58029c6">
	</div>
	<div class="grofile-hash-map-ef2f342ca8b441984154f1d970be0636">
	</div>
	<div class="grofile-hash-map-8081b26e05bb4354f7d65ffc34cbbd67">
	</div>
	<div class="grofile-hash-map-df2070ca58c840d32f19c16414c12ebc">
	</div>
	<div class="grofile-hash-map-ed77c74c903a3dbcbbc9ce09e6f10866">
	</div>
	<div class="grofile-hash-map-6f125f519f20c924a2995e7d2040b92b">
	</div>
	<div class="grofile-hash-map-8e75de08afdc1e0fe9333e758d3c7249">
	</div>
	<div class="grofile-hash-map-9e3e92366d82f660c1fccdce25534cc4">
	</div>
	<div class="grofile-hash-map-9215f8e1629bf8ad9932239cadd21a92">
	</div>
	<div class="grofile-hash-map-15b0525dc342aae23a9d73d608344f6a">
	</div>
	<div class="grofile-hash-map-d90572e3ae57526578c1d2b9b8d9a8bc">
	</div>
	<div class="grofile-hash-map-e6c31d18052706ff3f5fe7e496031e47">
	</div>
	<div class="grofile-hash-map-794f146f1e739414fed2468d562e4ff8">
	</div>
	<div class="grofile-hash-map-f804df10ff12260a5ce133c8ea7f537b">
	</div>
	<div class="grofile-hash-map-64777202bb6d589a6189647c38bfc739">
	</div>
	<div class="grofile-hash-map-913884ce5021f4bd52ef74e2cd0975b2">
	</div>
	<div class="grofile-hash-map-e41b59b12b7e51118ef8864b771f17ae">
	</div>
	<div class="grofile-hash-map-d95536527e2a11f685098ee8b61e76df">
	</div>
	<div class="grofile-hash-map-c5e13dd8e1a318747e9700eb5ecd0a8b">
	</div>
	<div class="grofile-hash-map-e1f5f6dc6e509c4abf6b9b5bb637a29a">
	</div>
	<div class="grofile-hash-map-d890de547a1de5b588e1b469040682e8">
	</div>
	<div class="grofile-hash-map-9a8c63f14f96052f64523b70c6677216">
	</div>
	<div class="grofile-hash-map-3e5826e924d052ec4e54a6724b623451">
	</div>
	<div class="grofile-hash-map-02e404d7e581f79707b1e513e5d18b98">
	</div>
	<div class="grofile-hash-map-fa2e035b822ed247a3d876d238791fb5">
	</div>
	<div class="grofile-hash-map-4c8aaa96d233e80fdd087a520ab4919f">
	</div>
	<div class="grofile-hash-map-747020301e8225e225e426bb120a1d05">
	</div>
	<div class="grofile-hash-map-d235d496ed9cc61990f308129c6c17f7">
	</div>
	<div class="grofile-hash-map-40abfe6fe69b9b8c481959af79935a41">
	</div>
	</div>
<script type="text/javascript" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/devicepx-jetpack.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var pollsL10n = {"ajax_url":"http:\/\/css-tricks.com\/wp-admin\/admin-ajax.php","text_wait":"Your last request is still being processed. Please wait a while ...","text_valid":"Please choose a valid poll answer.","text_multiple":"Maximum number of choices allowed: ","show_loading":"0","show_fading":"1"};
/* ]]> */
</script>
<script type="text/javascript" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/polls-js.js"></script>

	<script src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/e-201322.js" type="text/javascript"></script>
	<script type="text/javascript">
	st_go({v:'ext',j:'1:2.2.5',blog:'45537868',post:'9657',tz:'-7'});
	var load_cmc = function(){linktracker_init(45537868,9657,2);};
	if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
	else load_cmc();
	</script><img id="wpstats" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/g.gif" alt="">
  <script src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/global-ck.js"></script>
  <script async="" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/ei.js"></script>

  
  
  <script>
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-68528-29']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  })();
</script>

<script>
/* <![CDATA[ */
var google_conversion_id = 1017883234;
var google_conversion_label = "BsxVCM7ImAMQ4tSu5QM";
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/conversion.js">
</script><iframe name="google_conversion_frame" src="Useful%20%20nth-child%20Recipes%20_%20CSS-Tricks_files/a.htm" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" width="300" frameborder="0" height="13" scrolling="no">&lt;img
 height="1" width="1" border="0" 
src="http://googleads.g.doubleclick.net/pagead/viewthroughconversion/1017883234/?frame=0&amp;random=1370135025407&amp;cv=7&amp;fst=1370135025407&amp;num=1&amp;fmt=1&amp;label=BsxVCM7ImAMQ4tSu5QM&amp;guid=ON&amp;u_h=1080&amp;u_w=1920&amp;u_ah=1040&amp;u_aw=1920&amp;u_cd=24&amp;u_his=2&amp;u_tz=480&amp;u_java=true&amp;u_nplug=22&amp;u_nmime=179&amp;ref=http%3A//css-tricks.com/how-nth-child-works/&amp;url=http%3A//css-tricks.com/useful-nth-child-recipies/&amp;frm=0"
 /&gt;</iframe>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1017883234/?value=0&amp;label=BsxVCM7ImAMQ4tSu5QM&amp;guid=ON&amp;script=0">
</div>
</noscript>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Page Caching using disk
Content Delivery Network via cdn.css-tricks.com

 Served from: css-tricks.com @ 2013-06-01 17:55:06 by W3 Total Cache --></body></html>